<!-- Use this declaration for HTML5 -->
<!DOCTYPE html>
<html>
	<head>
		<title>DeVetma Admin</title>
		<!-- Link this, the main css that contains all the formating and styles -->
		<link href="import/bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="import/devetma/css/admin-default.css" rel="stylesheet">
		<link href="import/datatables/css/datatables.tw.bootstrap.ext.css" rel="stylesheet">
	</head>
	<body>
		<!-- Top Navigation -->
		<div class="navbar navbar-static-top">
			<div class="navbar-inner" style="padding-bottom: 3px;">
				<a href="#" class="brand" style="margin-left: 15px">
					<img src="images/logo2.png" alt="DeVetma" height="28px" width="87px"/>
				</a>
				<div class="pull-right">
                    <a href="#" class="btn btn-large">
						<i class="icon-arrow-left"></i>
					</a>
					<a href="#" class="btn btn-large">
						<i class="icon-home"></i>
						Admin Home
					</a>
					<a href="#" class="btn btn-large btn-danger">
						<i class="icon-share-alt"></i>
						Back to Main
					</a>
				</div>
			</div>
		</div>
		<!-- main container -->
		<div class="row" style="padding: 25px 0px 15px 15px">
			<!-- sidebar -->
			<div class="span3 well">
				<ul class="nav nav-list">
					<li class="nav-header">DeVetma Admin</li>
					<li class="active">
						<a href="#">
							<i class="icon-home"></i>
							Admin Home
						</a>
					</li>
					<li class="nav-header">Maintenance</li>
					<li>
						<a href="#">
							<i class="icon-th-large"></i>
							Male Clothes
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-th"></i>
							Female Clothes
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-th-list"></i>
							Miscelleanous
						</a>
					</li>
					<li class="divider"></li>
					<li>
						<a href="#">
							<i class="icon-shopping-cart"></i>
							Orders
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-barcode"></i>
							Payments
						</a>
					</li>
					<li class="divider"></li>
					<li>
						<a href="#">
							<i class="icon-user"></i>
							Users
						</a>
					</li>
					<li class="nav-header">Reports Generation</li>
					<li>
						<a href="#">
							<i class="icon-align-justify"></i>
							Business Report 1
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-align-justify"></i>
							Business Report 2
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-align-justify"></i>
							Business Report 3
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-align-justify"></i>
							Business Report 4
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-align-justify"></i>
							Business Report 5
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-align-justify"></i>
							Business Report 6
						</a>
					</li>
				</ul>
			</div>
			<!-- content placeholder -->
			<div class="span12">
				<div class="row">
					<div class="section pull-left" style="height: auto; width: 46%; margin-left: 25px">
						<div class="section-header">
							<h3>Orders</h3>
						</div>
						<div class="section-body">
						</div>
					</div>
					<div class="section pull-left" style="height: auto; width: 46%; margin-left: 25px">
						<div class="section-header">
							<h3>Payments</h3>
						</div>
						<div class="section-body">
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Link this javascript as well -->
		<script src="import/jquery/jquery-1.8.2.js"></script>
		<script src="import/bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" src="import/datatables/js/jquery.datatables.min.js"></script>
		<script type="text/javascript" src="import/datatables/js/datatables.tw.bootstrap.ext.js"></script>
	</body>
</html>